<?php
use yii\helpers\Html;
use yii\helpers\Url;
?>
<script src="/js/plugins/Highcharts-5.0.14/highcharts.js"></script>
<script src="/js/plugins/Highcharts-5.0.14/modules/exporting.js"></script>
<script src="/js/plugins/Highcharts-5.0.14/highcharts-zh_CN.js"></script>
<script src="/js/plugins/layer/laydate5.0.7/laydate.js" type="text/javascript"></script>
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>老用户半价统计</h5>
                </div>
                <div class="ibox-content">
                    <div class="form-group form-horizontal form-style">
                        <form action="">
                            <div class="row m-b">
                                <label class="col-sm-1 control-label">时间维度</label>
                                <div class="col-xs-1">
                                    <select class="form-control" name="dimension">
                                        <option value="1" <?=$dimension == 1?'selected':''?>>每天</option>
                                        <option value="2" <?=$dimension == 2?'selected':''?>>每周</option>
                                        <option value="3" <?=$dimension == 3?'selected':''?>>每月</option>
                                        <option value="4" <?=$dimension == 4?'selected':''?>>每季度</option>
                                        <option value="5" <?=$dimension == 5?'selected':''?>>每年</option>
                                    </select>
                                </div>
                                <label class="col-sm-1 control-label">日期范围</label>
                                <div class="col-xs-2">
                                    <input type="text" name="input_date" value="<?=$input_date?>" class="form-control" placeholder="选择日期">
                                </div>
                                <div class="col-sm-2">
                                    <button type="submit" class="btn btn-primary">搜索</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div id="container" style="min-width:400px;height:400px"></div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var chart = Highcharts.chart('container',{
            chart: {
                type: 'line'
            },
            title: {
                text: '老用户半价趋势图'
            },
            subtitle: {
                text: '数据来源: 口袋鼠'
            },
            xAxis: {
                categories: [<?=!empty($data['times'])?$data['times']:''?>]
            },
            yAxis: {
                title: {
                    text: '数值'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true          // 开启数据标签
                    },
                    enableMouseTracking: true // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                },
                series: {
                    events: {
                        legendItemClick: function (e) {
                            //增量,总量切换
                            for(var j=0;j<chart.series.length;j++){
                                chart.series[j].setVisible(e.target.index == j ? true : false);
                            }
                            return false;
                        }
                    }
                }
            },
            scrollbar: {
                enabled: true
            },
            series: [{
                name: '新增半价人数',
                data: [<?=!empty($data['increment_num'])?$data['increment_num']:''?>]
            },{
                visible:false,
                name: '累计半价人数',
                data: [<?=!empty($data['total_num'])?$data['total_num']:''?>]
            },{
                visible:false,
                name: '新增半价金额',
                data: [<?=!empty($data['increment_price'])?$data['increment_price']:''?>]
            },{
                visible:false,
                name: '累计半价金额',
                data: [<?=!empty($data['total_price'])?$data['total_price']:''?>]
            }]
        });
        $(function () {
            laydate.render({
                elem: 'input[name="input_date"]'
                ,range: '~'
                ,max: "<?=date('Y-m-d',time()-86400)?>"
                ,btns: ['confirm']
            });
        });
    </script>